<template>
    <div>
      <!--头部-->
      <div class="top">
        <div class="top-left">
          <img @click="goback()" src="../../../static/bmqd/BMQD-1.png" alt="">
        </div>
        <span>{{title}}</span>
        <router-link to="/idinfo">
          <p></p>
        </router-link>
      </div>


      <div class="id-info">
        <p>身份信息<span>请确保身份证信息真实有效，否则无法通过审核</span></p>
        <input class="inp1" type="text" placeholder="您的姓名（请填写身份证上的真实姓名）">
        <input class="inp2" type="text" placeholder="您的身份证号（将加密处理）">
        <p>身份证照片<span>上传身份证正反面照片让通关更便捷</span></p>

        <div class="id-img">
          <div class="id-img-list" v-for="item in arr">
            <div class="id-img-top">
                <img :src="item.url" />
                <p>请上传</p>
            </div>

            <div class="id-img-bot">
              <p>{{item.tit}}</p>
              <div class="bot-wrap">
                <div class="bot-h">
                  <img :src="item.url1" />
                </div>
                <ul>如上图所示 :
                  <li v-for="i in item.arr1">{{i.tit1}}</li>
                </ul>
              </div>
            </div>
          </div>


          <div class="id-img-right">

          </div>
        </div>

        <div class="con-foot">
          <h3>为什么需要实名认证？</h3>
          <ul>
            <li>根据海关规定，购买跨境商品需要办理清关手续，需要您上传身份证信息用于商品 入境申报真实的姓名和身份信息才能确保您的包裹顺利通过海关检查</li>
            <li>声明：阿拉灯负责提交信息，并对您的身份信息保密，绝不传播或用于其他地方 请放心填写。</li>
          </ul>
        </div>
        <div class="f-btn">
          <button class="btn2">提交</button>
        </div>


      </div>



    </div>
</template>

<script>
    export default {
        name: "Idinfo",
      data(){
          return{
            title:'身份实名认证',
            arr:[
              {url:require('../../../static/shezhi/3.png'),tit:'*上传前请先查看样张',url1:require('../../../static/shezhi/shenfenzheng1.png'),
                arr1:[
                  {tit1:'1.请保证图片焦点清晰，不可太小或模糊不清'},
                  {tit1:'2.不可有反光影响文字显示'},
                  {tit1:'3.请让四个边角完整显示；不要用手遮挡身份证'},
                  {tit1:'4.请不要使用复印件或扫描件'}
                ]
              },
              {url:require('../../../static/shezhi/4.png'),tit:'*查看更多帮助内容',url1:require('../../../static/shezhi/shenfenzheng2.png'),
                arr1:[
                  {tit1:'1.请保证图片焦点清晰，不可太小或模糊不清'},
                  {tit1:'2.不可有反光影响文字显示'},
                  {tit1:'3.请让四个边角完整显示；不要用手遮挡身份证'},
                  {tit1:'4.请不要使用复印件或扫描件'}
                ]
              }
            ]
          }
      },
      methods:{
        goback(){
          history.go(-1);
        }
      }
    }
</script>

<style scoped>
  .top{
    width: 69rem;
    height: 3rem;
    line-height: 3rem;
    padding: 3.5rem 1.5rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
  }
  .top span{
    font-size: 36px;
    color: #fff;
  }

  .top img{
    width: 3rem;
    height: 3rem;
  }


  .id-info>p{
    width: 68rem;
    height: 6rem;
    line-height: 6rem;
    padding: 0 2rem;
    background: #f2f2f2;
    color: #4d4d4d;
    font-size: 24px;
  }
  .id-info>p span{
    margin-left: 3rem;
    color: #e53e42;
    font-size: 18px;
  }
  .id-info input{
    width: 68rem;
    height: 4rem;
    padding: 2rem 2rem;
    font-size: 28px;
  }
  input::placeholder{
    color:#ccc;
  }
  .inp1{
    border-bottom: 1px solid #ccc;
  }




  .id-img{
    width: 62rem;
    padding: 4rem 5rem 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
  }
  .id-img-list{
    width: 28rem;
    height: 100%;
  }
  .id-img-top{
    width: 100%;
    height: 16rem;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    padding-top: 4rem;
  }
  .id-img-top img{
    width: 11rem;
    height: 8rem;
    margin-bottom: 2rem;
  }
  .id-img-top p{
    font-size: 24px;
    color: #ccc;
  }

  .id-img-bot{
    width: 22rem;
    padding: 4rem 3rem 0;
    text-align: center;
    margin-bottom: 2rem;
  }
  .id-img-bot p{
    font-size: 18px;
    color: #4d4d4d;
    margin-bottom: 2rem;
  }
  .bot-wrap{
    border: 1px solid #ccc;
  }
  .id-img-bot .bot-h{
    width: 16rem;
    height: 10rem;
    padding: 3rem;
    background: #f2f2f2;
    border-bottom: 1px solid #ccc;
  }
  .id-img-bot .bot-h img{
    width: 16rem;
    height: 10rem;
  }
  .id-img-bot ul{
    width: 100%;
    height: 12rem;
    padding: 0 .5rem;
    font-size: 14px;
    color: #666666;
    text-align: left;

  }
  .id-img-bot ul li{
    font-size: 10px;
    margin-top: 1rem;
  }

  .con-foot{
    border-bottom: 1px solid #ccc;
  }
  .con-foot h3{
    width: 72rem;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
    background: #f9d3d4;
    color: #e53e42;
    font-size: 24px;
  }
  .con-foot ul{
    padding: 1rem 2rem;
    background: #fff;
    margin-bottom: 2rem;
  }
  .con-foot ul li{
    list-style: disc;
    font-size: 18px;
    line-height: 2;
    margin-bottom: 1.5rem;
  }

  .f-btn{
    width: 72rem;
    height: 8rem;
    margin-top: 3rem;
    text-align: center;
  }
  .btn2{
    width: 21rem;
    height: 4rem;
    background: #e53e42;
    color: #fff;
    font-size: 20px;
    border-radius: 2rem;
  }
</style>
